<template>
	<view class="card">
		<view class="cardMsg">
			<p>订单编号：<text>123456789</text><text class="nopay">待付款</text></p>
			<view class="shopOrder">
				<img src="" alt="">
				<view class="message">
					<view class="title">头层牛皮沙发</view>
					<p>编号：114534</p>
					<p>规格：长430X宽522X高848mm</p>
					<text class="sp1">￥560</text>
					<text class="sp2">X1</text>
					<view>合计：￥560</view>
				</view>
			</view>
			<view class="btn">
		 	<button class="del">取消订单</button>
				<button class="pay">付款</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped>
.card {
  width: 672rpx;
  height: 334rpx;
  margin: 0 auto 40rpx;
  border-radius: 24rpx;
  background-color: #fff;
  transform: translateY(42rpx);
}
.cardMsg {
  margin: 0 36rpx 20rpx;
  position: relative;
  transform: translateY(22rpx);
}
.cardMsg > p {
  font-family: PingFangSC-Regular;
  font-size: 24rpx;
  color: #3e3e3e;
  letter-spacing: 2rpx;
}
.nopay {
  position: absolute;
  right: 0;
  top: -3rpx;
  color: #3e3e3e;
}
.shopOrder {
  display: flex;
  margin-top: 28rpx;
}
.shopOrder > img {
  width: 162rpx;
  height: 162rpx;
}
.message {
  font-size: 26rpx;
  font-family: PingFangSC-Regular;
  color: #8d8d8d;
  margin-left:28rpx;
  position: relative;
}
.title {
  font-family: PingFangSC-Semibold;
  color: #3e3e3e;
  width: 300rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message > div:nth-last-child(1) {
  color: #3e3e3e;
  text-align: right;
  width: 407rpx;
}
.message > p {
  font-size: 22rpx;
}
.message > .sp1 {
  position: absolute;
  right: 0;
  top: 0;
}
.message > .sp2 {
  position: absolute;
  right: 0;
  top: 37rpx;
}
.btn{
  display: flex;
  justify-content: right;
  width: 337.5rpx ;
  margin-top: 18rpx;
  margin-left: 262.5rpx;
}
.del {
  opacity: 0.25;
  border: 2rpx solid #6c6c6c;
  border-radius: 10rpx;
  font-size: 22rpx;
  font-family: PingFangSC-Regular;
  letter-spacing: 2rpx;
  padding: 1rpx 25rpx;
  margin-right: 32rpx;
}
.pay {
  opacity: 0.76;
  border-radius: 10rpx;
  font-size: 22rpx;
  border: 2rpx solid #2D4F43;
  color: #2D4F43;
  padding: 1rpx 25rpx;
}
.container>.card:nth-last-child(1){
    margin-bottom:236rpx;
}

</style>
